<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<html>
<head>
    <link rel="stylesheet" href="${ctx}/layui/css/layui.css">
    <script src="${ctx}/layui/jquery.js"></script>
    <link rel="font" href="${ctx}/layui/font/iconfont.woff">
    <title>$Title$</title>
</head>
<body>
<div class="layui-card">

    <div class="layui-card layui-card-header">
        <a onclick="prev()"><i class="layui-icon layui-icon-left"></i></a>
        所有申请
        <span style="float: right"> <a onclick="refresh()"><i class="layui-icon layui-icon-refresh"></i></a></span>

    </div>
    <div class="layui-card-body">
        <table class="layui-hide" id="test" lay-filter="test"></table>
    </div>
</div>

</body>

<script src="${ctx}/layui/layui.all.js"></script>
<script>
    layui.use('table', function () {
        var table = layui.table;

        table.render({
            elem: '#test'
            , url: '${ctx}/apply/getAppList'
            , where: {
                orderBy: 'approve_start_time desc',
                userId: '${userId}'
            }
            , cols: [[
                {field: 'title', title: '标题'}
                , {field: 'location', title: '地点', sort: true}
                , {field: 'startTime', title: '开始时间'}
                , {field: 'endTime', title: '结束时间'}
                , {field: 'status', title: '状态', templet: "#statusTpl"}
                , {field: 'approveStartTime', title: '提交时间'}
                , {fixed: 'right', title: "操作", align: 'center', width: 200, toolbar: '#barDemo'}

            ]]
            , cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
            , height: 470
            , page: true //开启分页
            , parseData: function (res) { //res 即为原始返回的数据
                return {
                    "code": res.code == 0, //解析接口状态
                    "msg": res.message, //解析提示文本
                    "count": res.data.total, //解析数据长度
                    "data": res.data.list //解析数据列表
                };
            }
            , request: {
                pageName: 'pageNum' //页码的参数名称，默认：page
                , limitName: 'pageSize' //每页数据量的参数名，默认：limit

            }
            , response: {
                statusName: 'code' //规定数据状态的字段名称，默认：code
                , statusCode: 0 //规定成功的状态码，默认：0
                , countName: 'count' //规定数据总数的字段名称，默认：count
                , dataName: 'data' //规定数据列表的字段名称，默认：data
            }

        });

        //监听工具条
        table.on('tool(test)', function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）

            if (layEvent === 'detail') { //查看
                layer.msg(JSON.stringify(data))
                //do somehing
            } else if (layEvent === 'del') { //删除
                layer.confirm('确认撤销该假条吗？', function (index) {
                    //向服务端发送删除指令
                    layer.close(index);
                    $.ajax({
                        url: "${ctx}/approve/undo",
                        type: "post",
                        contentType: "application/json",
                        data: JSON.stringify(data),
                        dataType: "json",
                        success: res => {
                            if (res.code == 1)
                                window.location.reload()
                            else
                                layer.msg("操作失败");
                        }
                    })
                })
            } else if (layEvent === 'finish') { //编辑
                layer.confirm('确认撤销该假条吗？', function (index) {
                    //向服务端发送删除指令
                    layer.close(index);
                    $.ajax({
                        url: "${ctx}/approve/finish",
                        type: "post",
                        contentType: "application/json",
                        data: JSON.stringify(data),
                        dataType: "json",
                        success: res => {
                            if (res.code == 1)
                                layer.alert(res.data, {
                                    skin: 'layui-layer-molv' //样式类名
                                    , closeBtn: 0
                                }, function () {
                                    window.location.reload()
                                });
                            else
                                layer.msg("操作失败");
                        }
                    })
                })
            } else if (layEvent === 'LAYTABLE_TIPS') {
                layer.alert('Hi，头部工具栏扩展的右侧图标。');
            }
        });
    });
</script>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="detail">查看</a>
    <c:if test="${user.getId()==userId}">
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>

        {{# if(!(d.status == 2 || d.status ==3 || d.status == 4 || d.status == 9)){ }}
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">撤销</a>
        {{# }else if(d.status == 2){ }}
        <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="finish">销假</a>
        {{# } }}
    </c:if>
</script>
<script type="text/html" id="statusTpl">
    {{# if(d.status==0){ }}
    HR审批中<i class="layui-icon layui-icon-log" style="color: #1E9FFF;"></i>
    {{# }else if(d.status == 1){ }}
    CEO审批中<i class="layui-icon layui-icon-log" style="color: #1E9FFF;"></i>
    {{# }else if(d.status == 2){ }}
    已通过<i class="layui-icon layui-icon-ok-circle" style="color: #1E9FFF;"></i>
    {{# }else if(d.status == 3){ }}
    已被拒绝<i class="layui-icon layui-icon-close-fill" style="color: #FF5722;"></i>
    {{# }else if(d.status == 4){ }}
    已撤销<i class="layui-icon layui-icon-close-fill" style="color: #FF5722;"></i>
    {{# }else if(d.status == 9){ }}
    休假完成<i class="layui-icon layui-icon-ok" style="color: #5FB878;"></i>
    {{# } }}
</script>
<script>
    function prev() {
        history.go(-1);
    }

    function refresh() {
        window.location.reload()
    }

</script>
</html>

